<template>
	<public-view navType="search" navTitle="搜索" topBgShow='1' navColor="#000000" backType="black">
		<view class="content flex f-d-c a-i-c">
			<!-- <view class="flex a-i-c">
				<view class="easyinput-view flex a-i-c">
					<uni-easyinput prefixIcon="search" @iconClick="inputValue" @input="inputValue" confirmType="search" :focus="true" v-model="value" placeholder="请输入内容" :styles="{borderColor:'rgba(0,0,0,0)',backgroundColor:'rgba(0,0,0,0)'}"></uni-easyinput>
				</view>
				<view class="color-333 f-s-28" style="margin-left: 28rpx;" @click="goBack">
					取消
				</view>
			</view> -->
			<view class="type-tab-list flex a-i-c">
				<block v-for="(item, index) in tab_type_list" :key="index">
					<view class="item flex j-c-c" :class="type_id === item.id?'active':'unacitve'" @click="changeTypeID(item)">
						{{item.name}}
						<view class="bottom" v-if="type_id === item.id"></view>
					</view>
				</block> 
			</view>
			<view class="w-100 flex f-w-w j-c-b" style="padding: 20rpx;">
				<block v-if="type_id === '1'">
					<block v-for="(item, index) in goods_list" :key="index">
						<goods-item :item="item"></goods-item>
					</block>
				</block>
				<block v-else>
					<block v-for="(item, index) in goods_list" :key="index">
						<goods-box :item="item"></goods-box>
					</block>
				</block>
			</view>
		</view>
	</public-view>
</template>

<script>
	import {getGoodsList} from "@/utils/pagePublic.js"
	import {goBack,goTo} from "@/nav.js"
	import goodsItem from "./components/goodItem.vue"
	import goodsBox from "@/components/myComponents/goodsBox.vue"
	export default {
		components:{
			"goods-box":goodsBox,
			"goods-item":goodsItem
		},
		data() {
			return {
				value:"",
				goods_list:[],
				timeout:"",
				type_id:"0",
				tab_type_list:[
					{
						id:'0',
						name:"车辆"
					},
					{
						id:'1',
						name:"配件"
					}
				],
			};
		},
		onLoad() {
			this.getGoodLista()
		},
		computed:{
			keywords(){
				return this.$store.state.search_keywords || ""
			}
		},
		watch:{
			"$store.state.search_keywords"(nval,oval){
				this.goods_list=[]
				this.getGoodLista()
			}
		},
		methods:{
			goBack,goTo,
			goToGoodsInfo(item){
				let str = JSON.stringify(item)
				this.$store.commit("changeGoodsInfo",str)
				this.goTo({url:'/pages/shop/goodsInfo'})
			},
			inputValue(){
				if(this.timeout!==""){
					
				}else{
					this.timeout = setTimeout(()=>{
						this.timeout = ""
						clearTimeout(this.timeout)
						this.getGoodLista()
					},600)
				}
				
			},
			changeTypeID(item){
				this.type_id = item.id
				this.goods_list = []
				this.getGoodLista()
			},
			getGoodLista(){
				let that = this
				if(that.type_id === '1'){
					getGoodsList({keyword:that.keywords},res=>{
						console.log(res)
						that.goods_list = res.data.data
					})
				}else{
					that.util.postRequest({
						url:"v1/lorry/index",
						data:{
							keyword:that.keywords
						}
					}).then(res=>{
						console.log(res)
						that.goods_list = res.data.data
					})
				}
				
			},
		}
	}
</script>
<style>
	.is-input-border{
		border: none !important;
	}
</style>
<style lang="scss" scoped>
	.type-tab-list{
		width: 100%;
		padding: 0 32upx;
		margin-bottom: 32upx;
		.item{
			position: relative;
			margin-right: 32upx;
			.bottom{
				width: 38upx;
				height: 4upx;
				background: #2567F3;
				position: absolute;
				bottom: -10upx;
				
			}
		}
		.active{
			line-height: 42upx;
			font-weight: bold;
			font-size: 30upx;
		}
		.unacitve{
			font-size: 28upx;
			color: #999999;
			line-height: 40upx;
		}
	}
	.search-item{
		width: 702upx;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f4f4f4;
		.icon{
			width: 30rpx;
			height: 30rpx;
			margin-right: 16rpx;
		}
	}
	.easyinput-view{
		width:608upx;
		height: 72upx;
		background: #EDEDED;
		border-radius: 36upx;
		.search-icon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
	}
	.content{
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(rgba(255,255,255,0.03),#FFFFFF);
	}
</style>
